{{ define "main" }}
  <!-- ======= Hero Section ======= -->
  {{ with .Params.hero_section }}
    {{ if .enable }}
      <section class="hero striped">
        <div class="container">
          <div class="row content align-items-center">
            <div class="col-lg-6">
              <h4 class="mb-3">
                <span>P</span>ipelined <span>R</span>elational
                <span>Q</span>uery <span>L</span>anguage, pronounced
                <span>“Prequel”</span>
              </h4>
              <h2 class="mb-3">{{ .heading | markdownify }}</h2>
              <p class="mb-3 bottom-text">{{ .bottom_text | markdownify }}</p>
              {{ if .button.enable }}
                {{ with .button }}
                  <a
                    class="btn"
                    href="{{ .link | safeURL }}"
                    title="{{ .label }}"
                  >
                    {{ .label }}</a
                  >
                {{ end }}
              {{ end }}
            </div>
            <div class="col-lg-6 pt-4 pt-lg-0">
              <pre tabindex="0">
          <code class="language-prql hljs" data-lang="prql">{{ $.Site.Data.examples.hero.prql }}</code>
        </pre>
            </div>
          </div>
        </div>
      </section>
    {{ end }}
  {{ end }}
  <!-- End Hero -->

  <main id="main">
    <!-- ======= Why PRQL Section ======= -->
    {{ with .Params.why_prql_section }}
      {{ if .enable }}
        <section class="big-cards-section">
          <div class="container">
            <div class="row">
              <div class="section-title">
                <h2>{{ .title | markdownify }}</h2>
              </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-2 justify-content-center">
              {{ range .items }}
                <div class="col g-3">
                  <div class="card">
                    <h4>{{ .title | markdownify }}</h4>
                    {{/* Probably there's a more general way of formatting
                      this padding; the default is 2em, which looked too indented
                    */}}
                    <ul style="padding-left:1em">
                      {{ range .content }}
                        <li>{{ . | markdownify }}</li>
                      {{ end }}
                    </ul>
                  </div>
                </div>
              {{ end }}
            </div>
          </div>
        </section>
      {{ end }}
    {{ end }}

    {{ with .Params.showcase_section }}
      {{ if .enable }}
        <section class="content-section showcase-section section-bg">
          <div class="container">
            <div class="row content">
              <div class="col-lg-4 mb-4">
                <div class="section-title">
                  <h2 class="mb-3">{{ .title | markdownify }}</h2>
                </div>

                {{ range .content }}
                  <p class="mb-3">{{ . }}</p>
                {{ end }}
                {{ range .buttons }}
                  <a class="btn" href="{{ .link | relURL }}">{{ .label }}</a>
                {{ end }}
              </div>

              <div class="col-lg-8 d-flex align-items-start">
                <div
                  class="nav flex-column nav-pills flex-shrink-0 me-3"
                  id="v-pills-tab"
                  role="tablist"
                  aria-orientation="vertical"
                >
                  {{ range $index, $e := .examples }}
                    <button
                      class="nav-link {{ if (eq 0 $index) }}active{{ end }}"
                      id="v-pills-{{ $e }}-tab"
                      data-bs-toggle="pill"
                      data-bs-target="#v-pills-{{ $e }}"
                      type="button"
                      role="tab"
                      aria-controls="v-pills-{{ $e }}"
                      aria-selected="false"
                    >
                      {{ $example := or (index site.Data.examples $e) (errorf "couldn't find example %q (expected such a .yaml file in data/examples)" $e) }}
                      {{ $example.label }}
                    </button>
                  {{ end }}
                </div>
                <div class="tab-content" id="v-pills-tabContent">
                  {{ range $index, $e := .examples }}
                    <div
                      class="tab-pane fade{{ if (eq 0 $index) }}
                        show active
                      {{ end }} row"
                      id="v-pills-{{ $e }}"
                      role="tabpanel"
                      aria-labelledby="v-pills-{{ $e }}-tab"
                      tabindex="0"
                    >
                      {{ $example := index $.Site.Data.examples $e }}
                      <pre><code class="language-prql hljs" data-lang="prql">{{ $example.prql }}</code></pre>
                      <pre><code class="language-sql hljs" data-lang="sql">{{ $example.sql }}</code></pre>
                    </div>
                  {{ end }}
                </div>
              </div>
            </div>
          </div>
        </section>
      {{ end }}
    {{ end }}

    {{ with .Params.principles_section }}
      {{/* TODO: can we integrate this with section-cards? It's very similar */}}
      {{ if .enable }}
        <section class="big-cards-section">
          <div class="container">
            <div class="row">
              <div class="section-title">
                <h2>{{ .title | markdownify }}</h2>
              </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-3 justify-content-center">
              {{ range .items }}
                <div class="col g-3">
                  <div class="card">
                    <h4>{{ .title | markdownify }}</h4>
                    <p class="blue-border">
                      <strong>{{ .main_text | markdownify }}</strong>
                    </p>
                    <p>{{ .content | markdownify }}</p>
                  </div>
                </div>
              {{ end }}
            </div>
          </div>
        </section>
      {{ end }}
    {{ end }}

    {{ with .Params.videos_section }}
      {{ if .enable }}
        <section class="videos-section">
          <div class="container">
            <div class="row">
              <div class="section-title">
                <h2>{{ .title | markdownify }}</h2>
              </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-3">
              {{ range .items }}
                <div class="col g-3">
                  <iframe
                    width="560"
                    height="315"
                    src="https://www.youtube-nocookie.com/embed/{{ .youtube_id }}"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen
                  ></iframe>
                </div>
              {{ end }}
            </div>
          </div>
        </section>
      {{ end }}
    {{ end }}

    {{ partial "section-cards" .Params.integrations_section }}
    {{ partial "section-cards" .Params.tools_section }}
    {{ partial "section-cards" .Params.bindings_section }}
    {{ partial "section-testimonials" .Params.testimonials_section }}
  </main>
{{ end }}
